<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/layout :: header('我的博客')">
    <title>我的博客 - 校园综合系统</title>
    <style>
        .card-body {
            min-height: 120px; /* 设置统一的最小高度 */
        }
        .card-title {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        .card-text {
            font-size: 2rem;
            line-height: 1.2;
        }
    </style>
</head>
<body>
    <header th:replace="fragments/layout :: navbar"></header>
    
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div th:replace="fragments/layout :: sidebar('blog-my')"></div>
            
            <!-- 主要内容 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">我的博客</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a href="/blog/publish" class="btn btn-sm btn-primary">
                            <i class="fas fa-plus me-1"></i>发布博客
                        </a>
                    </div>
                </div>
                
                <!-- 统计信息 -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card bg-primary text-white  h-100">
                            <div class="card-body">
                                <h5 class="card-title">总博客数</h5>
                                <h2 class="card-text mb-0" id="totalBlogs">0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-success text-white  h-100">
                            <div class="card-body">
                                <h5 class="card-title">总点赞数</h5>
                                <h2 class="card-text mb-0" id="totalLikes">0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-info text-white  h-100">
                            <div class="card-body">
                                <h5 class="card-title">总评论数</h5>
                                <p class="card-text mb-0" th:text="${commentCount}">0</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-info" role="alert" id="loadingAlert">
                    <i class="fas fa-spinner fa-spin me-1"></i> 正在加载博客内容...
                </div>
                
                <div id="blogList" class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
                    <!-- 博客卡片将通过JavaScript动态加载 -->
                </div>
                
                <!-- 无内容提示 -->
                <div id="emptyAlert" class="alert alert-warning mt-3" role="alert" style="display: none;">
                    <i class="fas fa-exclamation-circle me-1"></i> 暂无博客内容
                </div>
            </main>
        </div>
    </div>
    
    <div th:replace="fragments/layout :: scripts"></div>
    <script>
        $(document).ready(function() {
            // 加载我的博客列表
            loadMyBlogs();
            
            function loadMyBlogs() {
                $.ajax({
                    url: '/api/blog/my',
                    type: 'GET',
                    success: function(response) {
                        $('#loadingAlert').hide();
                        
                        if (response.code === 200 && response.data && response.data.length > 0) {
                            let blogs = response.data;
                            let html = '';
                            let totalLikes = 0;
                            
                            blogs.forEach(function(blog) {
                                totalLikes += blog.likes || 0;
                                html += `
                                <div class="col">
                                    <div class="card h-100 shadow-sm">
                                        ${blog.image ? `<img src="${blog.image}" class="card-img-top" alt="博客图片" style="height: 180px; object-fit: cover;">` : ''}
                                        <div class="card-body">
                                            <h5 class="card-title">${blog.title}</h5>
                                            <p class="card-text text-truncate">${blog.content}</p>
                                        </div>
                                        <div class="card-footer d-flex justify-content-between bg-transparent">
                                            <small class="text-muted">${formatDate(blog.createTime)}</small>
                                            <div>
                                                <button class="btn btn-sm btn-outline-primary like-btn" data-id="${blog.id}">
                                                    <i class="fas fa-thumbs-up"></i> ${blog.likes || 0}
                                                </button>
                                                <a href="/blog/detail?id=${blog.id}" class="btn btn-sm btn-outline-primary ms-1">
                                                    <i class="fas fa-eye"></i> 查看
                                                </a>
                                                <button class="btn btn-sm btn-outline-danger delete-btn ms-1" data-id="${blog.id}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>`;
                            });
                            
                            $('#blogList').html(html);
                            $('#totalBlogs').text(blogs.length);
                            $('#totalLikes').text(totalLikes);
                            setupLikeButtons();
                            setupDeleteButtons();
                        } else {
                            $('#emptyAlert').show();
                        }
                    },
                    error: function() {
                        $('#loadingAlert').hide();
                        $('#blogList').html('<div class="alert alert-danger w-100">加载失败，请稍后重试</div>');
                    }
                });
            }
            
            function setupLikeButtons() {
                $('.like-btn').click(function() {
                    const blogId = $(this).data('id');
                    const btn = $(this);
                    
                    $.ajax({
                        url: '/api/blog/like/' + blogId,
                        type: 'POST',
                        success: function(response) {
                            if (response.code === 200) {
                                let likesCount = parseInt(btn.text().trim());
                                btn.html('<i class="fas fa-thumbs-up"></i> ' + (likesCount + 1));
                                // 更新总点赞数
                                let totalLikes = parseInt($('#totalLikes').text());
                                $('#totalLikes').text(totalLikes + 1);
                            }
                        }
                    });
                });
            }
            
            function setupDeleteButtons() {
                $('.delete-btn').click(function() {
                    if (confirm('确定要删除这篇博客吗？')) {
                        const blogId = $(this).data('id');
                        const card = $(this).closest('.col');
                        
                        $.ajax({
                            url: '/api/blog/' + blogId,
                            type: 'DELETE',
                            success: function(response) {
                                if (response.code === 200) {
                                    card.remove();
                                    // 更新总博客数
                                    let totalBlogs = parseInt($('#totalBlogs').text());
                                    $('#totalBlogs').text(totalBlogs - 1);
                                    // 如果删除后没有博客了，显示空提示
                                    if (totalBlogs - 1 === 0) {
                                        $('#emptyAlert').show();
                                    }
                                } else {
                                    alert(response.message || '删除失败');
                                }
                            },
                            error: function() {
                                alert('删除请求失败，请稍后重试');
                            }
                        });
                    }
                });
            }
            
            function formatDate(dateString) {
                if (!dateString) return '';
                const date = new Date(dateString);
                return date.getFullYear() + '-' + 
                       padZero(date.getMonth() + 1) + '-' + 
                       padZero(date.getDate()) + ' ' + 
                       padZero(date.getHours()) + ':' + 
                       padZero(date.getMinutes());
            }
            
            function padZero(num) {
                return num < 10 ? '0' + num : num;
            }
            // 在页面加载和发表评论后更新评论数
            function updateCommentCount() {
                $.ajax({
                    url: '/api/blog/comment/count',
                    type: 'GET',
                    success: function(response) {
                        if (response.code === 200) {
                            $('#totalComments').text(response.data);
                        }
                    }
                });
            }

            // 页面加载时更新
            updateCommentCount();

            // 发表评论后更新
            function afterComment() {
                updateCommentCount();
            }
        });
    </script>
</body>
</html> 